<html lang="cn">
<head>
    <meta
            content="text/html; charset=utf-8"
            http-equiv="Content-Type"
    />
    <style
            media="all"
            type="text/css"
    >
        /* Generic styles */
        body {
            font-family: sans-serif;
            font-size: 0.8em;
            color: black;
            padding: 6px;
        }

        h2 {
            margin-top: 1.2em;
        }

        br {
            mso-data-placement: same-cell;
            /* maintain line breaks in Excel */
        }

        /* Statistics Table */
        table.statistics {
            width: 58em;
            border: 1px solid black;
            border-collapse: collapse;
            empty-cells: show;
            margin-bottom: 1em;
        }

        table.statistics td,
        table.statistics th {
            border: 1px solid black;
            padding: 1px 4px;
            margin: 0px;
        }

        table.statistics th {
            background: #C6C6C6;
        }

        .col_stat_name {
            width: 40em;
        }

        .col_stat {
            width: 3em;
            text-align: center;
        }

        .stat_name {
            float: left;
        }

        .stat_name a,
        .stat_name span {
            font-weight: bold;
        }

        .tag_links {
            font-size: 0.9em;
            float: right;
            margin-top: 0.05em;
        }

        .tag_links span {
            margin-left: 0.2em;
        }

        /* Statistics Table Graph */
        .pass_bar {
            background: #00f000;
        }

        .fail_bar {
            background: red;
        }

        .no_tags_bar {
            background: #E9E9E9;
        }

        .graph {
            position: relative;
            border: 1px solid black;
            width: 11em;
            height: 0.75em;
            padding: 0px;
            background: #E9E9E9;
        }

        .graph b {
            display: block;
            position: relative;
            height: 100%;
            float: left;
            font-size: 4px;
            /* to make graphs thin also in IE */
        }

        /* Tables in documentation */
        table.doc {
            border: 1px solid gray;
            background: transparent;
            border-collapse: collapse;
            empty-cells: show;
            font-size: 0.9em;
        }

        table.doc td {
            border: 1px solid gray;
            padding: 0.1em 0.3em;
            height: 1.2em;
        }

        /* Misc Styles */
        .not_available {
            color: gray;
            /* no grey in IE */
            font-weight: normal;
        }

        .parent_name {
            font-size: 0.7em;
            letter-spacing: -0.07em;
        }

        a:link,
        a:visited {
            text-decoration: none;
            color: blue;
        }

        a:hover,
        a:active {
            text-decoration: underline;
            color: purple;
        }

        /* Headers */
        .header {
            width: 58em;
            margin: 6px 0px;
        }

        h1 {
            margin: 0px;
            width: 70%;
            float: left;
        }

        .times {
            width: 29%;
            float: right;
            text-align: right;
        }

        .generated_time,
        .generated_ago {
            font-size: 0.9em;
        }

        .spacer {
            font-size: 0.8em;
            clear: both;
        }

        /* Status text colors */
        .error,
        .Failed,
        .Unavailable,
        .Investigated {
            color: red;
        }

        .Passed {
            color: #009900;
        }

        .warn {
            color: #FFCC00;
        }

        .NotRun {
            color: #663300;
        }

    </style>
    <style
            media="all"
            type="text/css"
    >
        body {
            background: #FF5555;
        }

        /* Generic Table Styles */
        table {
            background: white;
            border: 1px solid black;
            border-collapse: collapse;
            empty-cells: show;
            margin: 0px 1px;
        }

        th,
        td {
            border: 1px solid black;
            padding: 1px 5px;
        }

        th {
            background: #C6C6C6;
            color: black;
        }

        /* Test by Suite/Tag Tables */
        table.tests_by_suite,
        table.tests_by_tag {
            width: 100%;
        }

        .col_name {
            min-width: 10em;
            font-weight: bold;
        }

        .col_des {
            min-width: 5em;
        }

        .col_doc {
            min-width: 11em;
        }

        .col_tags {
            width: 10em;
        }

        .col_crit {
            width: 2em;
            text-align: center;
        }

        .col_status {
            width: 2.5em;
            text-align: center;
        }

        .col_errorMsg {
            min-width: 5em;
        }

        .col_msg {
            min-width: 5em;
        }

        .col_times {
            min-width: 9em;
        }

        td.col_times {
            text-align: right;
        }

        .suite_row,
        .tag_row {
            background: #E9E9E9;
        }

        .meta_name {
            font-weight: bold;
        }

        /* Details Table */
        table.details {
            width: 58em;
        }

        table.details th {
            background: white;
            width: 9em;
            text-align: left;
            vertical-align: top;
            padding-right: 1em;
            border: none;
            padding: 2px 4px;
        }

        table.details td {
            vertical-align: top;
            border: none;
            padding: 2px 4px;
        }

        .status_fail {
            color: red;
            font-weight: bold;
        }

        .status_pass {
            color: #009900;
        }

    </style>
    <style
            media="print"
            type="text/css"
    >
        body {
            background: white;
            padding: 0px;
            font-size: 8pt;
        }

        a:link,
        a:visited {
            color: black;
        }

        .header,
        table.details,
        table.statistics {
            width: 100%;
        }

        .generated_ago,
        .expand {
            display: none;
        }

    </style>
    <title></title>
</head>
<body>
<div class="header">
    <h1></h1>
</div>
<div class="spacer">&nbsp;</div>


<h2>Summary Information</h2>

<table class="details">
    <tr>
        <th>Start Time:</th>
        <td>{{startTime}}</td>
    </tr>
    <tr>
        <th>End Time:</th>
        <td>{{endTime}}</td>
    </tr>
    <tr>
        <th>Pass Cases:</th>
        <td class="Passed">{{passTask}} (cases)</td>
    </tr>
    <tr>
        <th>Failed Cases:</th>
        <td class="Failed">{{failedTask}} (cases)</td>
    </tr>
    <tr>
        <th>Not Run Cases:</th>
        <td class="NotRun">{{noRunTask}} (cases)</td>
    </tr>
</table>
<h2>Test Details by Cases</h2>
<pre>
<a href="javascript:OnclickShowAllLink()">Show All Cases</a> | <a href="javascript:OnclickFILink()">Show All Passed Cases</a> | <a
        href="javascript:OnclickFLink()">Show All Failed Cases</a> | <a href="javascript:OnclickILink()">Show All noRun Cases</a>
</pre>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script
        language="javascript"
        type="text/javascript"
>

  window.onload = function () {
    localStorage.removeItem('allCaseData');
    setColor();
    getAllCaseData();
  };

  function getAllCaseData() {
    let testRows = document.getElementsByClassName('test_row');
    let col_name = document.querySelectorAll('.test_row .col_name');
    let col_des = document.querySelectorAll('.test_row .col_des');
    let col_status = document.querySelectorAll('.test_row .col_status');
    let col_errorMsg = document.querySelectorAll('.test_row .col_errorMsg');
    let col_times = document.querySelectorAll('.test_row .col_times');
    let col_msg = document.querySelectorAll('.test_row .col_msg');
    let arr = [];
    for (let i = 0; i < testRows.length; i++) {
      let obj = {};
      obj = {
        col_name: col_name[i].innerHTML,
        col_des: col_des[i].innerText,
        col_status: col_status[i].innerText,
        col_errorMsg: col_errorMsg[i].innerText,
        col_times: col_times[i].innerText,
        col_msg: col_msg[i].innerHTML,
      };
      arr.push(obj);
    }
    localStorage.setItem('allCaseData', JSON.stringify(arr));
  }


  function OnclickShowAllLink() {
    let allCaseData = JSON.parse(localStorage.getItem('allCaseData'));
    let test_row = document.querySelectorAll('.test_row');
    console.log(allCaseData);
    let col_name = document.querySelectorAll('.test_row .col_name');
    let col_des = document.querySelectorAll('.test_row .col_des');
    let col_status = document.querySelectorAll('.test_row .col_status');
    let col_errorMsg = document.querySelectorAll('.test_row .col_errorMsg');
    let col_times = document.querySelectorAll('.test_row .col_times');
    let col_msg = document.querySelectorAll('.test_row .col_msg');
    for (let i = 0; i < allCaseData.length; i++) {
      col_name[i].innerHTML = allCaseData[i].col_name;
      col_des[i].innerText = allCaseData[i].col_des;
      col_status[i].innerText = allCaseData[i].col_status;
      col_errorMsg[i].innerText = allCaseData[i].col_errorMsg;
      col_times[i].innerText = allCaseData[i].col_times;
      col_msg[i].innerHTML = allCaseData[i].col_msg;
      test_row[i].style.display = 'table-row';
    }
  }

  function OnclickFILink() {
    let allCaseData = JSON.parse(localStorage.getItem('allCaseData'));
    let test_row = document.querySelectorAll('.test_row');
    let col_name = document.querySelectorAll('.test_row .col_name');
    let col_des = document.querySelectorAll('.test_row .col_des');
    let col_status = document.querySelectorAll('.test_row .col_status');
    let col_errorMsg = document.querySelectorAll('.test_row .col_errorMsg');
    let col_times = document.querySelectorAll('.test_row .col_times');
    let col_msg = document.querySelectorAll('.test_row .col_msg');
    for (let i = 0; i < allCaseData.length; i++) {
      if (allCaseData[i].col_status === 'pass') {
        col_name[i].innerHTML = allCaseData[i].col_name;
        col_des[i].innerText = allCaseData[i].col_des;
        col_status[i].innerText = allCaseData[i].col_status;
        col_errorMsg[i].innerText = allCaseData[i].col_errorMsg;
        col_times[i].innerText = allCaseData[i].col_times;
        col_msg[i].innerHTML = allCaseData[i].col_msg;
        test_row[i].style.display = 'table-row';
      } else {
        test_row[i].style.display = 'none';
      }
    }
  }

  function OnclickFLink() {
    let allCaseData = JSON.parse(localStorage.getItem('allCaseData'));
    let test_row = document.querySelectorAll('.test_row');
    let col_name = document.querySelectorAll('.test_row .col_name');
    let col_des = document.querySelectorAll('.test_row .col_des');
    let col_status = document.querySelectorAll('.test_row .col_status');
    let col_errorMsg = document.querySelectorAll('.test_row .col_errorMsg');
    let col_times = document.querySelectorAll('.test_row .col_times');
    let col_msg = document.querySelectorAll('.test_row .col_msg');
    for (let i = 0; i < allCaseData.length; i++) {
      if (allCaseData[i].col_status === 'fail') {
        col_name[i].innerHTML = allCaseData[i].col_name;
        col_des[i].innerText = allCaseData[i].col_des;
        col_status[i].innerText = allCaseData[i].col_status;
        col_errorMsg[i].innerText = allCaseData[i].col_errorMsg;
        col_times[i].innerText = allCaseData[i].col_times;
        col_msg[i].innerHTML = allCaseData[i].col_msg;
        test_row[i].style.display = 'table-row';
      } else {
        test_row[i].style.display = 'none';
      }
    }
  }

  function OnclickILink() {
    let allCaseData = JSON.parse(localStorage.getItem('allCaseData'));
    let test_row = document.querySelectorAll('.test_row');
    let col_name = document.querySelectorAll('.test_row .col_name');
    let col_des = document.querySelectorAll('.test_row .col_des');
    let col_status = document.querySelectorAll('.test_row .col_status');
    let col_errorMsg = document.querySelectorAll('.test_row .col_errorMsg');
    let col_times = document.querySelectorAll('.test_row .col_times');
    let col_msg = document.querySelectorAll('.test_row .col_msg');
    for (let i = 0; i < allCaseData.length; i++) {
      if (allCaseData[i].col_status === 'noRun') {
        col_name[i].innerHTML = allCaseData[i].col_name;
        col_des[i].innerText = allCaseData[i].col_des;
        col_status[i].innerText = allCaseData[i].col_status;
        col_errorMsg[i].innerText = allCaseData[i].col_errorMsg;
        col_times[i].innerText = allCaseData[i].col_times;
        col_msg[i].innerHTML = allCaseData[i].col_msg;
        test_row[i].style.display = 'table-row';
      } else {
        test_row[i].style.display = 'none';
      }
    }
  }

  function setColor() {
    let investigated = document.getElementsByClassName('col_status Investigated');
    for (let i = 0; i < investigated.length; i++) {
      if (investigated[i].innerText === 'pass') {
        investigated[i].style.color = '#009900';
      } else {
        investigated[i].style.color = 'red';
      }
    }


    let failed = document.getElementsByClassName('failed')[0];
    let body = document.getElementsByTagName('body')[0];
    if (parseInt(failed.innerText) > 0) {
      body.style.backgroundColor = '#FF5555';
    } else {
      body.style.backgroundColor = '#009900';
    }
  }


</script>
<table class="tests_by_suite">
    <tr>
        <th class="col_name">Name</th>
        <th class="col_des">Description</th>
        <th class="col_status">Status</th>
        <th class="col_errorMsg">errorMessage</th>
        <th class="col_times">Start&nbsp;/&nbsp;Elapsed</th>
        <th class="col_msg">Logs</th>
    </tr>
    {{#each records}}
    <tr class="test_row">
        <td class="col_name">{{link this.[1].caseName this.[1].reportPath}}</td>
        <td class="col_des">{{this.[1].description}}</td>
        <td class="col_status Investigated">{{this.[1].taskStatus}}
        </td>
        <td class="col_errorMsg">{{this.[1].errorMessage}}
        </td>
        <td class="col_times">
            {{this.[1].startTime}}</br>
            {{this.[1].endTime}}
        </td>
        <td
                align="left"
                class="col_msg"
        >
            {{link 'console' this.[1].consoleLogPath}}</br>
            {{link 'error' this.[1].errorLogPath}}
        </td>
    </tr>
    {{/each}}
</table>


</body>
</html>
